<html>
<head>
    <title>jQuery Sync Values Demo</title>
    <style>
#top {
    font-size: 1.2em;
}
#leftpair {
    width: 62%;
}
#middle {
    float: right;
    margin: 0px;
    text-align: center;
}
#right {
    float: right;
    text-align: right;
}
#left {
    text-align: left;
}
#bottom {
    margin: -5px 5px;
}
.box {
    margin: 0px 5px;
    padding: 5px;
    border: 1px dotted black;
    text-align: center;
}
.source {
    height: 15em;
    width: 14em;
}
    </style>
    <script type="text/javascript" src="../jquery.1.3.2.js"></script>
    <script type="text/javascript" src="../jquery.values.js"></script>
    <script type="text/javascript" src="jquery.sync.js"></script>
    <script type="text/javascript" src="../log.js"></script>
    <script type="text/javascript">
$(function() {
    // button handlers
    $('.toright').click(function() {
        var values = $(this).parents('.box').values();
        var $right = $('#right').values(values);
        log('Retrieved', values, 'and set to', $right);
        return false;
    });
    $('.tomiddle').click(function() {
        var key = $('#bottom').values('key');
        var value = $('#bottom').values('value');
        var $middle = $('#middle').values(key, value);
        log('Retrieved key & value (',key,'=',value,') and set to',$middle);
        return false;
    });
    $('.circle').click(function() {
        $('#right').syncFrom('#left');
        $(this).remove();
        $('.toright').remove();
    });
    $('.bidi').click(function() {
        $('#foo').sync('#bar').sync('#woogie');
        $(this).remove();
    });

    // shift all changes to the left
    $('#left').syncFrom('#middle');
    $('#right').syncTo('#middle');
});
    </script>
</head>
<body>
<div id="top" class="box">
    This uses the Values plugin to keep the different panels below in sync
    from right to left. Any changes to the panel on the right are mirrored
    in the middle panel, whose changes are then mirrored in the left panel.
    Try changing various fields and pushing buttons to see the effects;
    then, be sure to examine the source to see how simple this is to use.
</div>
<br clear="all">
<div id="right" class="box source" title="Right">
    <label>id:</label>
    <input type="text" name="id" value="right"><br>
    <label for="a">a:</label>
    <input type="text" name="a" value="zero"><br>
    <label for="b">b:</label>
    1<input type="checkbox" name="b" value="one">
    2<input type="checkbox" name="b" value="two" checked="true">
    3<input type="checkbox" name="b" value="three"><br>
    <label for="c">c:</label>
    <select name="c">
        <option selected="true">four</option>
        <option>five</option>
        <option>six</option>
    </select><br>
    <label for="d">d:</label>
    <input type="radio" name="d" value="seven" checked="true">7
    <input type="radio" name="d" value="eight">8
    <input type="radio" name="d" value="nine">9<br>
    <label for="e">e:</label>
    <select multiple="true" name="e">
        <option>ten</option>
        <option selected="true">eleven</option>
        <option>twelve</option>
    </select><br>
    <label for="f">f:</label>
    <textarea name="f">thirteen</textarea><br>
</div>
<div id="leftpair">
<div id="middle" class="box source" title="Middle">
    <div class="row">
        <span>id:</span>
        <span name="id">middle</span>
    </div>
    <div class="row">
        <span>a:</span>
        <span name="a"></span>
    </div>
    <div class="row">
        <span>b:</span>
        <span name="b"></span>
    </div>
    <div class="row">
        <span>c:</span>
        <span name="c"></span>
    </div>
    <div class="row">
        <span>d:</span>
        <span name="d"></span>
    </div>
    <div class="row">
        <span>e:</span>
        <span name="e"></span>
    </div>
    <div class="row">
        <span>f:</span>
        <span name="f"></span>
    </div>
    <button class="toright">Copy All To Right-&gt;</button>
</div>
<div id="left" class="box source" title="Left">
    <label>id:</label>
    <input type="text" name="id" value="left"><br>
    <label for="a">a:</label>
    <textarea name="a"></textarea><br>
    <label for="b">b:</label>
    <select multiple="true" name="b">
        <option>one</option>
        <option>two</option>
        <option>three</option>
    </select><br>
    <label for="c">c:</label>
    <input type="radio" name="c" value="four">4
    <input type="radio" name="c" value="five">5
    <input type="radio" name="c" value="six">6<br>
    <label for="d">d:</label>
    <select name="d">
        <option>seven</option>
        <option>eight</option>
        <option>nine</option>
    </select><br>
    <label for="e">e:</label>
    10<input type="checkbox" name="e" value="ten">
    11<input type="checkbox" name="e" value="eleven">
    12<input type="checkbox" name="e" value="twelve"><br>
    <label for="f">f:</label>
    <input type="text" name="f" value=""><br>
    <button class="toright">Copy All To Far Right-&gt;&gt;</button>
</div>
</div>
<br clear="all">
<div id="bottom" class="box">
    <label for="key">key:</label>
    <select name="key">
        <option>id</option>
        <option>a</option>
        <option selected="true">b</option>
        <option>c</option>
        <option>d</option>
        <option>e</option>
        <option>f</option>
    </select>
    <label for="value">value:</label>
    <input type="text" name="value" value="foo,one,bar,three,">
    <button class="tomiddle">Set To Middle</button><br><br>
    <button class="circle">Do $('#right').syncFrom('#left')</button>
</div>
<br>
<div id="bidi" class="box">
    <label for="foo">foo:</label>
    <input type="text" id="foo" name="bidi" value="foo">
    <label for="bar">bar:</label>
    <input type="text" id="bar" name="bidi" value="bar">
    <label for="woogie">woogie:</label>
    <input type="text" id="woogie" name="bidi" value="woogie">
    <button class="bidi">Do $('#foo').sync('#bar').sync('#woogie')</button>
</div>
</body>
</html>